<template>
  <div class="obs-study">
    <div class="content">
      <div class="obs_box">
        <div class="obs_box_item">
          <span>功能1:压缩图片</span>
          <el-progress
            type="dashboard"
            :percentage="percentage"
            :color="colors"
          ></el-progress>
          <div>
            <el-button-group>
              <el-button icon="el-icon-minus" @click="decrease"></el-button>
              <el-button icon="el-icon-plus" @click="increase"></el-button>
            </el-button-group>
          </div>
          <span>请调整压缩质量</span>
          <el-upload
            class="upload-demo"
            action
            accept="image/*"
            :http-request="uploadImg"
            :multiple="false"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <!-- <div class="obs_box_item">
          <span>功能2:上传资源文件</span>
          <el-input
            v-model="uploadParams"
            placeholder="请输入资源文件名称"
          ></el-input>
          <el-upload
            class="upload-demo"
            action
            :http-request="uploadImg"
            :multiple="false"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <div class="obs_box_item">
          <span>功能3:返回信息</span>
          <el-button :loading="tableLoading" type="primary">返回信息</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  Upload,
  download
} from '../api'
export default {
  name: 'ObsDemo',
  components: {},
  data () {
    return {
      uploadParams: '',
      tableLoading: false,
      percentage: 50,
      colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },

  mounted () {

  },
  methods: {
    async uploadImg (params) {
      try {
        const file = params.file
        const formData = new FormData()
        const data = {
          name: this.uploadParams ? this.uploadParams : '',
          percentage: this.percentage
        }
        const param = JSON.stringify(data)
        formData.append('file', file) // 图片文件
        formData.append('data', param) // 图片参数信息
        const res = await Upload(formData)
        const content = res.data
        const blob = new Blob([content])
        const eLink = document.createElement('a')
        eLink.download = `output.jpg`
        eLink.style.display = 'none'
        eLink.href = URL.createObjectURL(blob)
        document.body.appendChild(eLink)
        eLink.click()
        URL.revokeObjectURL(eLink.href) // 释放URL 对象
        document.body.removeChild(eLink)
      } catch (error) {
        this.$errAlert(error)
      }
    },
    async downloadFile (item) {
      this.tableLoading = true
      const type = item.type
      const key = item.key_name
      try {
        const params = {
          bucketName: this.bucketName,
          key: key,
          type: type
        }
        const res = await download(params)
        const content = res.data
        const blob = new Blob([content])
        const fileName = `${key}.${type}`
        const eLink = document.createElement('a')
        eLink.download = fileName
        eLink.style.display = 'none'
        eLink.href = URL.createObjectURL(blob)
        document.body.appendChild(eLink)
        eLink.click()
        URL.revokeObjectURL(eLink.href) // 释放URL 对象
        document.body.removeChild(eLink)
        this.tableLoading = false
      } catch (error) {
        this.$message({
          type: 'fail',
          message: `文件下载失败${error}`
        })
        this.tableLoading = false
        this.requestMsg()
      }
    },
    increase () {
      this.percentage += 10
      if (this.percentage > 80) {
        this.percentage = 80
      }
    },
    decrease () {
      this.percentage -= 10
      if (this.percentage < 20) {
        this.percentage = 20
      }
    }
  }
}
</script>

<style lang="less" scoped>
.obs-study {
  height: 100%;
}
.handle_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  span {
    cursor: pointer;
    font-size: 14px;
    &:first-child {
      color: rgb(17, 87, 192);
    }
    &:last-child {
      color: red;
    }
  }
}
@media screen {
  //大于700
  @media (min-width: 700px) {
    .obs_box {
      width: calc(100% - 40px);
      display: flex;
      margin: auto;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20px 0;
      .obs_box_item {
        min-width: 300px;
        width: calc((100%));
        height: 500px;
        margin-bottom: 20px;
        border: 1px solid #ca2939;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        border-radius: 6px;
      }
      .obs_box_item_table {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 6px;
        text-align: center;
      }
    }
  }
  //小于700
  @media (max-width: 700px) {
    .obs_box {
      width: calc(100% - 20px);
      display: flex;
      margin: auto;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20px 0;
      .obs_box_item {
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
        border: 1px solid #ca2939;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        border-radius: 6px;
      }
      .obs_box_item_table {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 6px;
        text-align: center;
      }
    }
  }
}
.img_mini {
  width: 80px;
  height: 80px;
  margin: auto;
  span {
    text-align: center;
    line-height: 80px;
    display: inline-block;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.upload-demo {
  display: inline-block;
}
.el-input {
  width: 200px;
  margin: 0 20px;
}
</style>
